<template>
  <div class="webglCubeDiv">
  </div>
</template>

<script>
import * as THREE from 'three';
import {OrbitControls} from 'three/examples/jsm/controls/OrbitControls.js';
export default {
  name: 'cube',
  methods: {
    initWebgl() {
      const scene = new THREE.Scene();
      let webglDiv = document.getElementsByClassName('webglCubeDiv')[0];
      const camera = new THREE.PerspectiveCamera(45, webglDiv.clientWidth / webglDiv.clientHeight, 0.1, 1000);

      const renderer = new THREE.WebGLRenderer({antialias: true});

      renderer.setSize(webglDiv.clientWidth, webglDiv.clientHeight);
      webglDiv.appendChild(renderer.domElement);

      const texture = new THREE.TextureLoader().load( 'logo.png');
      const geometry = new THREE.BoxGeometry(80, 80, 80);
      let material = new THREE.MeshBasicMaterial({map: texture});
      const cube = new THREE.Mesh(geometry, material);
      scene.add(cube);

      camera.position.z = 100;
      camera.position.x = 100;
      camera.position.y = 100;

      const controls = new OrbitControls(camera, renderer.domElement);
      controls.update();

      const animate = function () {
        requestAnimationFrame(animate);
        controls.update();
        cube.rotation.x += 0.01;
        cube.rotation.y += 0.01;

        renderer.render(scene, camera);
      };

      animate();
    }
  },
  mounted() {
    this.initWebgl();
  }
}
</script>

<style scoped lang="less">
.webglCubeDiv {
  height: 100%;
}
</style>
